/********************* my space***************/
@myspaceBanner:             %("%simages/%s/banner%s.png",@customImgPath,@colorSchemeName,@suffixImg);
@header-logo-height:             70px;
.my_space {
    #header {
        position: relative;
        z-index: 121;

    }
    .header-top{
        border-bottom:1px solid @grayLighter;
    }
    .header-top img{
        height: @header-logo-height;
    }
    .flat{
        .head {
        border-bottom: 1px solid #CBCBCB;
        color: #000;
        margin-bottom: 10px;
        }
    }

    .breadcrumb {
        display: none;
    }
    .flash_messages {

    }
    .main-content {
        background: #fff;
        filter: none;
        min-height: 745px;
    }
    #footer {
        border-top: 1px solid #CBCBCB;
        position: relative;
        // z-index: 122;
        height: 100%;
        background: data-uri(%("%simages/nav_bg.png",@customImgPath))repeat;
        a{
            color:#aaa;
        }
    }
    .navbar-inner {

       background: none;
       background-color:#fff;
        border: none;
        .box-shadow(none);
    }
    .navbar{
        border-bottom: none;
    }
    .navbar .nav {
        // margin-top: 60px;
        margin-top: 0;
        li {
            a{
                position: relative;
                overflow: hidden;
                color: #333;
                height:auto;
                // line-height = logo height- padding;
                line-height: @header-logo-height - 20;
                border-bottom:none;
                font-size:15px;
                .org_bot_cor{
                    display: none;
                }
            }
            &.active > a,
            &.active > a:hover,
            a:hover {
                color: #000;
                border-bottom:none;
                text-decoration: none;
                // background-color: @SecondaryAccentColor;
                background: transparent;
                .box-shadow(none);
            }
            .dropdown-menu li{
                margin:0;
                 a:hover,
                 a:focus{
                    background: @AccentColor;
                    color:@white;
                 }
            }
            &.dropdown.open .dropdown-toggle,
            &.dropdown.active .dropdown-toggle,
            &.dropdown.open.active .dropdown-toggle{
                background-color:@AccentColor;
            }
        }
        
    }
    .comment {
        .avatar{
            width:auto;
            margin-left:0;
        }
    }

    .avatar {

        margin-left: 10px;
        width:100%;
    }
    img.avatar{
        border:3px solid #fcfcfc;
        .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
    }
    .my_name {
        position: relative;
        right: 50px;
        top: 50px;
        float: right;
        a {
            font-size: 15px;
        }

        .text-white:hover {
            color: #fff;
        }
    }
    .app-sidebar {
        margin: 0 auto;
        position: relative;
        background-color: transparent;



        .banner {
            position: relative;
            background: url(@myspaceBanner) repeat-x;
            height: 80px;
            margin-right: 0;
            margin-bottom: 20px;
        }

        .control_panel {
            padding-top: 10px;
            // padding-bottom: 40px;
            // background: data-uri(%("%simages/nav_bg.gif",@customImgPath)) repeat;

            // border: 1px solid #CBCBCB;
            margin-bottom: 10px;
            background: none;
            border: none;
            z-index: 2;
            .avatar {
                position: absolute;
                top: 10px;
                left: 20px;

            }

            .nav {
                margin-left: @defaultTextIndent;
                padding:0;
                .schemify-text(@navlistBackgroundColor);
            }
            .nav-list {
                    margin:0;
                    &>li {
                        line-height: 30px;
                        // border-bottom: 1px solid #CBCBCB;
                        border-bottom:none;
                        font-size: 16px;


                        &:hover{
                            background: transparent;
                        }
                        &:first-child {
                            border-top:1px solid #CBCBCB;
                        }
                        
                        &.active a{
                            color: #2687be;
                        }
                        a {
                            position: relative;
                            left: 0;
                            margin-left:0;
                            padding: 3px 0;
                            // width:100%;
                            display: inline-block;

                            .ie7-inline-block();

                            text-indent: 0;
                            &:hover{
                                color: #109ADB;
                                /*left: 2px;*/
                                background: #ffffff;
                            }
                        }
                        .sub_menus  li {
                            position: relative;
                            
                            &:before {
                                content: "";
                                display: inline-block;
                                position: absolute;
                                width: 9px;
                                left: 31px;
                                top: 17px;
                                border-top: 1px dashed #B1C9E0;
                            }
                            &:after {
                                content: "";
                                display: inline-block;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 28px;
                                width: 0;
                                border-left: 1px dashed #B1C9E0;
                            }
                             a {
                                text-indent: 60px;
                                background-color: transparent;
                                text-shadow:none;
                            }
                        }
                        
                    }
                }

            &.vertical-nav .nav-list {
                display: inline-block;
                .ie7-inline-block();
                width: 100%;
                border: none;
                border-bottom: 3px solid #CBCBCB;

                margin-top: 10px;
                position: relative;
                  .menu-line{
                        height: 3px;
                        position: absolute;
                        bottom:-3px;
                          width: 10%;
                          margin: 0;
                          background: @AccentColor;
                          border: none;
                          transition: .3s ease-in-out;
                    }
                &>li {
                    float: left;
                    margin-bottom: -2px;
                    line-height: 28px;

                    &:first-child {
                        border-top: none;
                    }
                  


                    a {
                        
                        position: relative;
                        // width: 120px;
                        padding: 0 10px;
                        margin: 0;
                        .ie7-inline-block();
                        // width:100%;
                        // text-indent: 40px;
                        border: none;
                        // border-bottom: 2px solid transparent;
                        line-height: 43px;
                        .contrast-link(@white);


                        text-align: center;

                        
                        background-color: transparent;


                        &:hover, &:focus {
                            padding: 0 10px;
                            margin: 0;
                            //color: @AccentColor;
                            // background:@navlistBackgroundColor @navlistBackgroundImage no-repeat left top;

                           // background-color: transparent;
                            border: none;
                            // border-bottom: 2px solid @AccentColor;
                            text-shadow:none;
                            background: lighten(@AccentColor, 15%);
                            color:@white;
                            .transition( background-color .3s ease);
                            .transition( color .5s ease-in);
                        }

                        // &:before{
                        //     content: '';
                        //     display: block;
                        //     position: absolute;
                        //     left: 0;
                        //     bottom: 0;
                        //     height: 3px;
                        //     width: 0;
                        //     transition: width 0s ease, background .5s ease;
                        // }
                        // &:after{
                        //     content: '';
                        //     display: block;
                        //     position: absolute;
                        //     right: 0;
                        //     bottom: 0;
                        //     height: 3px;
                        //     width: 0;
                        //     background: blue;
                        //     transition: width .5s ease;
                        // }
                        // &:hover:before{
                        //      width: 100%;
                        //     background: blue;
                        //     transition: width .5s ease;
                        // }
                        // &:hover:after {
                        //     width: 100%;
                        //     background: transparent;
                        //     transition: all 0s ease;
                        // }
                    }
                    &.active {
                        a, a:hover,a:focus {
                            // background:@navlistBackgroundColor @navlistBackgroundImage no-repeat left top;

                            background-color: transparent;
                            color: @AccentColor;

                            border: none;
                            // border-bottom: 3px solid transparent;
                            text-shadow:none;
                            // border-bottom: 2px solid @AccentColor;
                        }


                        .dropdown-menu{

                          
                                li {
                                    border:none;
                                    a{
                                    
                                        line-height: 30px;
                                        border:none;
                                        color: @gray;

                                        &:hover{
                                            border: none;
                                        }
                                    }
                                }
                            
                        }
                    }

                    .caret {
                        vertical-align: middle;
                        margin-top: 0;
                    }
                    .caret-plus {
                        background-image: url(@iconWhiteSpritePath);
                        background-position: -408px -96px;
                        margin: 0;
                        border: none;
                    }
                }
                &>li ul.dropdown-menu{
                     min-width: 120px;
                     top: 80%;
                    .icon{
                        margin-right: 10px;
                        margin-top: 5px;
                    }
                    li {
                        min-height: 30px;
                        border: none;
                        margin:2px 0;
                        a {
                            min-height: 30px;
                            min-width: 120px;
                            line-height: 30px;
                            padding:0 10px;
                            border:none;
                            &:hover{
                                border: none;
                                background: @AccentColor;
                                color: @white;
                            }
                        }
                    }
                    
                }
            }

        }
    }
}


/* 
*  control_panel
*/

.my_space .control_panel .nav-list li{
    background: transparent;
}
.control_panel {
    .nav-list li * a{
        line-height: 30px;
        padding-left: 24px;
        &:focus{
            color: @gray;
        }

    }

    .nav-list{
        padding:0;
        li{
            border-bottom: 1px solid darken(@grayLighter, 10%);
            background-color: @grayLighter;
            // &:last-child{
            //     border-bottom: none;
            // }
            &:hover{
                background-color: darken(@grayLighter, 10%);
            }

            &.cat-parent{
                border-bottom: none;
                // border-bottom:1px solid @grayLight;
                position: relative;

                a{
                    font-size: 12px;
                    text-indent: 32px;
                }

                &.active > a{

                     // background-color: @AccentColor;
                }
                .caret{
                    position: absolute;
                    right:0;
                    width: 30px;
                    height: 40px;
                    line-height: 40px;
                    border:none;
                    background-color: @grayLighter;
                }
                .open{
                    .plus-plus{
                        .sprite(@mins_ico);
                    }
                }

                .plus-plus{
                        position: absolute;
                        top: 13px;
                        right: 8px;
                        .sprite(@plus_ico);
                        background-color: @grayLighter;
                      
                }

                & > a{
                    background-color: @white;
                    border-bottom:1px solid darken(@grayLighter, 10%);
                    // color:#fcfcfc;
                    width: 100%;
                    // display: inline-block;
                    // .ie7-inline-block();
                    display: block;
                    line-height: 40px;
                    // padding-left:24px;
                    // text-indent: 30px;
                    //padding-left: 0;
                    padding: 0;
                    margin:0;
                    font-size:16px;
                }
                li.active a{
                    background: #fcfcfc;
                    color:@AccentColor;
                }
                li > a{
                    text-indent: 24px;
                    display: block;
                }

                // li:last-child{
                //     border-bottom:1px solid @AccentColor;
                // }
            }
            &.cat-top-parent{
                &> a{
                    background-color: @DominantTone;
                }
                &> ul{
                    border-left:3px solid @DominantTone;
                }
            }
        }
    }
    &>.nav-list>.cat-top-parent.active>a{
         background-color: @DominantTone;
    }
}





.control_content {
    overflow: hidden;
}

.control_content .ctrl {
    background: data-uri(%("%simages/big_nav_icons.png",@customImgPath)) no-repeat;
    width: 100px;
    height: 100px;
    display: block;
    text-indent: -10000px;
    float: left;
    margin: 15px;
}


.control_content .ctrl-video {
    background-position: 0 -159px;
}

.control_content .ctrl-video:hover {
    background-position: 0 0;
}

.control_content .ctrl-album {
    background-position: -120px -159px;
}

.control_content .ctrl-album:hover {
    background-position: -120px 0;
}

.control_content .ctrl-meeting {
    background-position: -240px -159px;
}

.control_content .ctrl-meeting:hover {
    background-position: -240px 0;
}

.control_content .ctrl-subject {
    background-position: -360px -159px;
}

.control_content .ctrl-subject:hover {
    background-position: -360px 0;
}

.control_content .ctrl-live {
    background-position: -480px -159px;
}

.control_content .ctrl-live:hover {
    background-position: -480px 0;
}






.control_add .btn-add{
    display: inline-block;
    .ie7-inline-block();
    height: 36px;
    line-height: 36px;
    text-decoration: none;
    background: @DominantTone;

    -moz-transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
    transition: all ease 0.2s;
}


ul.sub_nav li.active,
ul.sub_nav li a:hover,
ul.sub_nav li a:active,
.sub_nav .control_add .btn-add.active,
.sub_nav .control_add .btn-add:hover,
.sub_nav .control_add .btn-add:active {
    background: @AccentColor;
    color: #fff;
    // font-weight: bold;
    -webkit-animation: cro-scale ease-in infinite;
    -moz-animation: cro-scale ease-in infinite;
    animation: cro-scale ease-in infinite;
    -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
    animation-duration: 10s;

}


ul.sub_nav li a .org_bot_cor,
.sub_nav .control_add .org_bot_cor {
    visibility: hidden;
    display: none;
}


ul.sub_nav li.active .org_bot_cor,
ul.sub_nav li a:hover .org_bot_cor,
ul.sub_nav li a:active .org_bot_cor,
.sub_nav .control_add .btn-add.active .org_bot_cor,
.sub_nav .control_add .btn-add:hover .org_bot_cor,
.sub_nav .control_add .btn-add:active .org_bot_cor {
    width: 0;
    height: 0;
    font-size: 0;
    border-width: 15px;
    border-style: solid;
    border-color: @AccentColor transparent transparent;
    _border-color: @AccentColor white white;
    overflow: hidden;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    margin-left: -15px;
    left: 50%;
    bottom: -20px;
}

.my_space .navbar .nav .active > a .org_bot_cor,
.my_space .navbar .nav .active > a:hover .org_bot_cor,
.my_space .navbar .nav > li > a:hover .org_bot_cor {
    width: 0;
    height: 0;
    font-size: 0;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent @AccentColor transparent;
    _border-color: white white @AccentColor white;
    overflow: hidden;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    margin-left: -15px;
    left: 50%;
    bottom: -8px;
}

@gridColumnWidth_iframe:        65px;
@gridGutterWidth_iframe:        10px;
@gridRowWidth_iframe:           (@gridColumns * @gridColumnWidth_iframe) + (@gridGutterWidth_iframe * (@gridColumns - 1));

@fluidGridColumnWidth_iframe:   percentage(@gridColumnWidth_iframe/@gridRowWidth_iframe);
@fluidGridGutterWidth_iframe:   percentage(@gridGutterWidth_iframe/@gridRowWidth_iframe);


@media (min-width: 768px) and (max-width: 979px) {

    body.in_iframe{
      #grid > .core(@gridColumnWidth_iframe, @gridGutterWidth_iframe);

      // Fluid grid
      #grid > .fluid(@fluidGridColumnWidth_iframe, @fluidGridGutterWidth_iframe);

      // Input grid
      #grid > .input(@gridColumnWidth_iframe, @gridGutterWidth_iframe);
    }
}